<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   
    
    <title>My JSP 'test.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript"  src="js/jquery.js"></script>
  </head>
  
  <body>
    	<form action=""  id="frm">
    		username:<input  type="text"  name="username" id="username"  value="">
    				 <label   id="usernamelabel"></label>
    	
    	</form>
    	<script type="text/javascript">
    		$("#username").focus(function(){
    			$("#usernamelabel").hide();
    		});
    	
    		$("#username").blur(function(){
    			var   username = $("#username").val()	;
    			$("#usernamelabel").show();
    			$.ajax({
    				cache: false,
    				async: false,
    				type: "post",
    				dataType: "json",
    				data:{"username":username},
    				url:"/fruits/test/TestAjaxServlet",
    				success: function(res){
    					if(res==true){
    						$("#usernamelabel").text("当前用户名可用");
    						$("#usernamelabel").css("color","green");
    						
    					}
    					if(res==false){
    						$("#usernamelabel").text("当前用户名已存在");
    						$("#usernamelabel").css("color","red");
    						
    					}
    					
    				}
    				
    				
    			});
    			
    		});
    		
    	</script>
    	
    	
    	
    	
  </body>
</html>
